<template>
<div class="all">
  <div class="imgdiv">
    <van-image
      round
      width="10rem"
      height="10rem"
      src="https://img.yzcdn.cn/vant/cat.jpeg"
    />
    <div class="name">
        {{username}}
    </div>
  </div>
  <div class="util">
  <van-cell-group inset>
    <van-cell title="修改个人信息" is-link to="/center/updateuserinfo" clickable="true"/>
    <van-cell title="查看资金" is-link to="/center/mymoney" clickable="true"/>
    <van-cell title="已接皇榜" is-link to="/center/myaccepthb" clickable="true"/>
    <van-cell title="已淘宝贝" is-link to="/center/myacceptes" clickable="true"/>
    <van-cell title="我的二手" is-link to="/center/myes" clickable="true"/>
    <van-cell title="我的皇榜" is-link to="/center/myhb" clickable="true"/>
  </van-cell-group>
  </div>
</div>
</template>

<script>
import { Image as VanImage } from 'vant';
import { Cell, CellGroup } from 'vant';
export default {
  components:{
    'van-image' : VanImage,
    'van-cell-group':CellGroup,
    'van-cell': Cell
  },
  data(){
    return{
      username : this.$store.state.username,
    }
  },
  mounted(){
    if(this.$store.state.username){
      this.username = this.$store.state.username;
    }else{
      this.username = localStorage.username;
    }
  },
  methods:{

  }

}
</script>

<style scoped>
.imgdiv{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  margin: 1em 1em;
  background: #D3CCE3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding: 1em;
  border-radius: 20px;
}
.name{
  margin-top: 1em;
}
.all{
  background-color: rgb(247, 248, 250);
  width:100%;
  height: 100%;
  position: absolute;
}
</style>